<template>
  <div class="category">
    <el-card class="box-card" shadow="never" style="border-radius: 10px">
      <div slot="header" class="clearfix">
        <span>分类</span>
      </div>
      <div
        v-for="item in form"
        :key="item.id"
        class="text item"
        @click="CateGo(item.id, item.name)"
      >
        <i class="el-icon-folder-opened" style="margin-right: 10px"></i>
        {{ item.name }}
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: "",
        name: "",
      },
    };
  },
  methods: {
    CateGo(id1, name1) {
      console.log("v", id1, name1);
      if (this.$route.query.id !== id1 || this.$route.query.name !== name1) {
        this.$router
          .push({
            path: "/TagTextView",
            query: {
              id: id1,
              name: name1,
            },
          })
          .catch((err) => {
            if (err.name !== "NavigationDuplicated") {
              throw err;
            }
          });
      } else {
        // 如果已经是当前路由，可以在这里添加一些逻辑，比如刷新数据
        // this.getList();
      }
    },
    getCategoryList() {
      this.$axios
        .post("http://47.104.167.34:9110/api/category/list", {
          params: {},
        })
        .then((r) => {
          console.log(r, "ok-list-getCategoryList");
          this.form = r.data.data;
          //   console.log("list", this.form.list);
        })
        .catch((r) => {
          console.log(r, "catch");
        });
    },
  },
  created() {
    this.getCategoryList();
  },
};
</script>

<style scoped>
.category {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.box-card {
  width: 100%;
}
.text {
  width: 100%;
  height: 36px;
  list-style: 36px;
  padding-left: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text:hover {
  background-color: rgba(117, 103, 103, 0.141);
}
</style>